﻿<!DOCTYPE html>
<html>
    <head>
        <title>CSS3文本阴影特殊效果的应用</title>
        <style>
            div {
                font-size: 30px
            }
            .a1 {
                text-shadow: 0 0 5px green
            }
            .a2 {
                text-shadow: 0 0 5px blue
            }
            .a3 {
                text-shadow: 0 0 5px yellow
            }

            .b {
                font-weight: bold;
                background-color: #CCCCCC;
                color: #D1D1D1
            }
            .b1 {
                text-shadow: -1px -1px white, 1px 1px #333
            }
            .b2 {
                text-shadow: 1px 1px white, -1px -1px #444
            }

            .c {
                text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
                color: white
            }
        </style>
    </head>
    <body>
        <h3>文字发光效果</h3>
        <div class="a1">
            本文字内容仅用于测试
        </div>
        <div class="a2">
            本文字内容仅用于测试
        </div>
        <div class="a3">
            本文字内容仅用于测试
        </div>
        <hr>

        <h3>凹凸纹理效果</h3>
        <div class="b b1">
            本文字内容仅用于测试
        </div>
        <div class="b b2">
            本文字内容仅用于测试
        </div>
        <hr>

        <h3>文字描边效果</h3>
        <div class="c">
            本文字内容仅用于测试
        </div>
    </body>
</html>